<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
			}
			/*
			 .box1::before{
			 	content:'';
			 	dispaliy:table;
			 }*/
			.box2{
				width: 100px;
				height: 100px;
				background-color: orange;
				margin-top: 100px;
				}
				/*clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，
				 * 当你在遇到这些问题的实收可以直接使用clearfix*/
				.clearfix::before,
				.clearfix::after{
					content:'';
					display: table;
					clear: both;
				}
			
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
		</div>
	</body>
</html>
